<template>
  <div class="cc-box">
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>公司管理</a-breadcrumb-item>
          <a-breadcrumb-item>流程管理</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10">
        <a-layout>
          <a-layout>
            <a-layout-sider>
              <div class="">
                <a-list item-layout="horizontal" :data-source="tableData.liuChengLeiXingVOS" bordered class="kk-item-list">
                  <template #renderItem="{ item,index }">
                    <a-list-item class="pr pointer" :class="[currentIndex == index?'active':0]" @click="handleLoadChange(item.liuChengLeiXing,index)">
                      <a-list-item-meta>
                        <template #title>
                          <div class="flex justify-content-between align-center">
                            <div>{{item.liuChengLeiXing}}<span class="ml2">（{{item.liuChengShuLiang || 0}}）</span></div>
                            <div @click="handleAddOpen(item.liuChengLeiXing)">
                              <i class="iconfont icon-tianjia"></i>
                            </div>
                          </div>
                        </template>
                      </a-list-item-meta>
                    </a-list-item>
                  </template>
                </a-list>
              </div>
            </a-layout-sider>
            <a-layout-content :style="contentStyle">
              <div class="ml30">
                <a-table :columns="columns"
                         rowClassName="items"
                         :custom-row="handleOperationRow"
                         :loading="false"
                         :pagination="false"
                         :data-source="tableData.liuChengDingYiVOS"
                         size="small" sticky bordered>
                  <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'chuanBoMing'">
                      <div>船舶：{{record.chuanBoMing}} </div>
                      <div>职位：{{record.zhiWeiMing}} </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'operation'">
                      <div class="editable-row-operations">
                        <span class="mr5">
                         <a-button type="primary" size="small" @click="handleEdit(record)"> <template #icon><EditOutlined style="font-size:12px"/></template>编辑</a-button>
                        </span>
                        <span>
                          <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(record.id)">
                           <a-button type="primary" size="small" danger> <template #icon><CloseOutlined
                               style="font-size:12px"/></template>删除</a-button>
                          </a-popconfirm>
                        </span>
                      </div>
                    </template>
                  </template>
                </a-table>
              </div>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </div>
    </div>
    <add-flow ref="addRef" @success="handleLoadData"></add-flow>
  </div>
</template>
<script setup>
import AddFlow from "./compoments/AddFlow.vue";

const addRef = ref(null)
const currentIndex = ref(0)
const contentStyle = {
  background:'#fff'
};
const tableData = ref({
  liuChengLeiXingVOS:[],
  liuChengDingYiVOS:[],
});

const queryParams = reactive({
  "leiXing": "离船申请",
})

// 定义表格的列信息
const columns = [
  {
    title: '序号',
    width: 80,
    fixed: "left",
    align:"center",
    dataIndex: 'index',
    customRender: ({text, record, index}) =>  index + 1
  },
  {
    title: '名称',
    align:"center",
    dataIndex: 'mingCheng',
  },
  {
    title: '适用范围',
    dataIndex: 'chuanBoMing',
  },
  {
    title: '流程审批',
    align:"center",
    dataIndex: 'buZhouShuJu',
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'operation',
  }
];

const handleOperationRow = (record) => {
  return {
    onClick: (event) => {
      handleShowEdit()
    }
  };
}

const handleLoadChange = (e,index)=>{
  if(currentIndex.value == index)return
  currentIndex.value = index
  queryParams.leiXing = e
  tableData.value.liuChengDingYiVOS = []
  handleLoadData()
}

const handleLoadData = async () => {
  const resp = await useLoadLiuChengDingYiApi(queryParams)
  tableData.value = resp.data
}

// 添加
const handleAddOpen = (leixing) => {
  addRef.value.handleOpen({},leixing)
}

// 添加
const handleEdit = (record,leixing) => {
  addRef.value.handleOpen({...record},queryParams.leiXing)
}

// 删除
const handleDelete = async(id) => {
  try {
    await useDelLiuChengDingYiApi(id)
    notification.destroy()
    notification.success({
      "message": "提示",
      "description": "删除成功"
    })
    handleLoadData()
  }catch (e){
    useMessage().error(e.msg)
  }
}

onMounted(()=>{
  handleLoadData()
})


</script>

<style scoped>
.cc-box {
  .ant-layout-sider {
    min-width: 180px!important;
  }
  .kk-item-list{
    height: calc(100vh - 235px);
    overflow: auto;
    .active{background:#e9f5ff;}
  }
  .gutter-box{margin-bottom: 6px;}
}

</style>

